<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
    <!-- 页面容器 -->
    <div class="wrap">
        <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">底部</div>
    </div>

    <script>
    
    // JS的组成部分：ECMAScript DOM BOM
    // DOM -> Document Object Model 文档 对象 模型
    // DOM是针对html和xml的API(应用程序接口)
    // DOM提供了各种操作html标签的方法
    //当html文档在浏览器中打开时，浏览器渲染进程会解析html文档并构建一颗DOM树（节点树）
    // DOM提供各种方法让JS可以增删改查DOM树中的每一个节点

    // 在DOM树中，不同的节点有五种类型：
    // 1.整个html文档，叫 文档节点 document
    // 2.每一个html标签，叫 元素节点 body div p a ...
    // 3.标签中的文本，叫 文本节点
    // 4.标签上的属性，叫 属性节点
    // 5.html中的注释，叫 注释节点

    // DOM将html文档中的每一个节点初始化成一个对象 console.log(typeof 节点) // 'object'

    </script>
    </body>
</html>